import { useState } from 'react'
import { useLoad } from '@tarojs/taro'
import { Icon } from '@taroify/icons'
import { Cell, Image } from '@taroify/core'
import { ActionBar } from '@taroify/commerce'
import { Swiper, SwiperItem, Text, View } from '@tarojs/components'

import styles from './detail.module.scss'
import HtmlView from '@/components/HtmlView'
import { useStorage } from '@/hooks/useStorage'
import { useNavigate } from '@/hooks/useNavigate'
import { useAuthHandler } from '@/hooks/useAuthHandler'

export default function GoodsDetail() {
  const [code, setCode] = useState('')
  const [goods] = useStorage<Data>('goods')
  const navigate = useNavigate()
  const { execute: navigateTo } = useAuthHandler(navigate)

  useLoad((options = {}) => {
    setCode(options.code ?? '')
    console.log('[goods detail] onLoad', goods)
  })

  return (
    <View className="page">
      <View className="page-content pb-5 gap-4">
        <Swiper className="banner" indicator-dots autoplay interval={5000} style="height: 370px">
          <SwiperItem>
            <Image className="size-full" src={goods?.bigPic} mode="aspectFill" />
          </SwiperItem>
        </Swiper>

        <Cell.Group inset>
          <View className="p-4 bg-default rounded-lg shadow-md">
            <View className="mb-3">
              <Text className="text-lg font-semibold">{goods?.name}</Text>
            </View>
            <View className="mb-3 text-error">
              <Text className="text-xs">￥</Text>
              <Text className="text-lg font-semibold">{goods?.price}</Text>
            </View>
            <View className="mb-3">
              <Text className="text-xs text-grey">{goods?.describes}</Text>
            </View>
          </View>
        </Cell.Group>

        <Cell.Group inset>
          <Cell className="gap-2" title="适用车型" titleClass="max-w-24" valueClass="!text-start">
            <Text className="text-xs">轿车精洗</Text>
          </Cell>
          <Cell className="gap-2" title="可用优惠券" titleClass="max-w-24" valueClass="!text-start">
            <Text className="text-xs">减免券、优惠券</Text>
          </Cell>
          <Cell className="flex-col gap-1" title="洗车须知：" valueClass="text-xs !text-start leading-relaxed">
            <View className="mb-1">
              <Text>
                夏天小心用冷水洗车:
                高速行驶后或暴露在烈日下后,由于油漆的表面温度很高,如果此时用冷水冲洗油漆,会对油漆表面(尤其是刚刚修复的刮花油漆表面)产生
              </Text>
            </View>
            <View className="mb-1">
              <Text>
                1. 请提前预约，以免等待时间过长。\n 2. 请提前准备好车辆，以便工作人员进行清洗。\n 3.
                请提前准备好车辆，以便工作人员进行清洗。\n 4. 请提前准备好车辆，以便工作人员进行清洗。\n
              </Text>
            </View>
          </Cell>
        </Cell.Group>

        <Cell.Group className="mb-5" inset>
          <Cell
            className="flex-col gap-2"
            title="详细介绍"
            titleClass="text-center"
            valueClass="text-sm !text-default !text-start leading-relaxed"
          >
            <HtmlView content={goods?.details} />
          </Cell>
        </Cell.Group>
      </View>

      <View className={styles.actionbar}>
        <ActionBar className="pe-4" fixed safeArea="bottom">
          <ActionBar.IconButton onClick={() => navigate('/pages/index/index', 'switchTab')}>
            <Icon classPrefix="icon" name="shouye" color="var(--color-primary)" size={24} />
            <Text>首页</Text>
          </ActionBar.IconButton>
          <ActionBar.IconButton onClick={() => navigateTo(`/pages/booking/index?code=${code}`)}>
            <Icon classPrefix="icon" name="kefu" color="var(--color-primary)" size={24} />
            <Text>客服</Text>
          </ActionBar.IconButton>
          <View className="ms-auto" style={{ width: '50%' }}>
            <ActionBar.Button color="primary" onClick={() => navigateTo(`/pages/booking/index?code=${code}`)}>
              <Text>立即下单</Text>
            </ActionBar.Button>
          </View>
        </ActionBar>
      </View>
    </View>
  )
}
